<template>
    <div class="emailpass">
        <van-nav-bar left-arrow :border="false" @click-left="router.go(-1)"></van-nav-bar>
        <loginTitle>
            <template #title>忘记密码</template>
            <template #text>输入您的电子邮件地址以接受重置密码</template>
        </loginTitle>
        <van-form @submit="onSubmit" style="margin-top: 8rem;">
            <van-cell-group inset>
                <van-field left-icon="ecard-pay" v-model="useremail" name="email" placeholder="请输入Email"
                    :rules="[{ required: true, message: '请填写Email' }, { pattern: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/, message: '邮箱格式错误' }]" />
            </van-cell-group>
            <div style="text-align: center;margin-top: 3rem">
                <van-button type="primary" size="large" native-type="submit"
                    color="linear-gradient(to right, #e9837a, #7536f9)">
                    发送邮件
                </van-button>
            </div>
        </van-form>
        <keyBoard></keyBoard>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import router from '@/router';
import loginTitle from '@/components/loginTitle.vue';
import { useUserLogin } from '@/store/useLogin/index';
let useLogin = useUserLogin()
let useremail = ref('');
// 注册按钮
const onSubmit = async (values: any) => {
    await useLogin.getStoreemail(values)
};

</script>
<style lang="scss" scoped>
.emailpass {
    height: 100%;
    width: 100%;

}

::v-deep .van-nav-bar .van-icon {
    color: #000;
}

::v-deep .van-button {
    height: 4.5rem;
    width: 32rem;
    border-radius: 1rem;
}

::v-deep .van-cell {
    height: 5.5rem;
}

::v-deep .van-field__left-icon {
    color: #8560c7;
}
</style>